<template>
    <h2>条件渲染</h2>
    <span v-if="number==1">你好,你说的对</span>
    <span v-else-if="number==2">当前数据为2</span>
    <span v-else>你说错了</span>
    <!--1.v-if 也是惰性的:如果在初次渲染师条件值为false,则不会做任何事,只要当初始条件满足是才会渲染元素内容 -->
    <!--2.v-show 不管初始条件是否满足都会渲染,只是当条件不满足是会额外加入css属性 display!!!-->
    <!--<span v-show="number==1">显示v-show的使用</span>-->
</template>

<script setup lang="ts">
    const number=1;
</script>
